@import "./variables/common";

$prefix-cls: $loading-prefix-cls;

.#{$prefix-cls}-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    background-color: rgba($color-light, .5);
    & .#{$prefix-cls}-1 {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: center;
        & .#{$prefix-cls}-bar-1 {
            width: 5px;
            height: 8px;
            border-radius: 5px;
            background-color: rgba($color-theme, .5);
            margin: 0 1px;
            animation: #{$prefix-cls}-bar-1-animation 0.4s ease-in infinite alternate;
        }
        @for $i from 1 through 5 {
            & .#{$prefix-cls}-bar-1-#{$i} {
                animation-delay: #{($i - 1) * 0.1}s;
            }
        }
    }
    & .#{$prefix-cls}-2 {
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items: flex-end;
        height: 30px;
        & .#{$prefix-cls}-bar-2 {
            width: 5px;
            height: 0;
            background-color: rgba($color-theme, 0);
            margin: 0 1px;
            animation: #{$prefix-cls}-bar-2-animation 0.5s ease-in-out infinite alternate;
        }
        @for $i from 1 through 5 {
            & .#{$prefix-cls}-bar-2-#{$i} {
                animation-delay: #{($i - 1) * 0.1}s;
            }
        }
    }
}

@keyframes #{$prefix-cls}-bar-1-animation {
    from {
        height: 8px;
        background-color: rgba($color-theme, .5);
    }
    to {
        height: 30px;
        background-color: rgba($color-theme, .8);
    }
}

@keyframes #{$prefix-cls}-bar-2-animation {
    from {
        height: 0;
        background-color: rgba($color-theme, 0);
    }
    to {
        height: 30px;
        background-color: rgba($color-theme, .8);
    }
}
